<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> 
<html>
<head>
<title>Painting in Qt4</title>
<link rel="stylesheet" href="/cfg/format.css" type="text/css">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta name="keywords" content="Qt4, tutorial, painting, C++, programming, GUI, multiplatform">
<meta name="description" content="In this chapter of the Qt4 tutorial, we will do some
painting.">
<meta name="language" content="en">
<meta name="author" content="Jan Bodnar">
<meta name="distribution" content="global">

<script type="text/javascript" src="/lib/jquery.js"></script>
<script type="text/javascript" src="/lib/common.js"></script>

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-5536206-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>

</head>

<body>

<div class="container2">

<div id="wide_ad" class="ltow">
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* 160x600, August 2011 */
google_ad_slot = "2484182563";
google_ad_width = 160;
google_ad_height = 600;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>

<div class="content2">


<a href="/" title="Home">Home</a>&nbsp;
<a href="..">Contents</a>


<h1>Painting in Qt4</h1>


<p>
In this part of the Qt4 C++ programming tutorial we will do some painting. 
</p>

<div class="big_hor">
<script type="text/javascript"><!--
google_ad_client = "ca-pub-9706709751191532";
/* big_horizontal */
google_ad_slot = "2904953388";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>


<p>
The <code>QPainter</code> class is instrumental when we do some painting 
in Qt4. The painting is done with the QPainter class in a reaction to the 
<code>paintEvent()</code> method.
</p>


<h2>Lines</h2>

<p>
In the first example we will paint some lines on the client area of the window. 
</p>

<div class="codehead">lines.h</div>
<pre class="code">
#pragma once

#include &lt;QWidget&gt;

class Lines : public QWidget
{
  Q_OBJECT  

  public:
    Lines(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);
    void drawLines(QPainter *qp);

};
</pre>

<p>
The header file. 
</p>

<div class="codehead">lines.cpp</div>
<pre class="code">
#include "lines.h"
#include &lt;QPainter&gt;


Lines::Lines(QWidget *parent)
    : QWidget(parent)
{

}

void Lines::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);
  QPainter qp(this);
  drawLines(&amp;qp);
}

void Lines::drawLines(QPainter *qp)
{  
  QPen pen(Qt::black, 2, Qt::SolidLine);  
  qp->setPen(pen);
  qp->drawLine(20, 40, 250, 40);

  pen.setStyle(Qt::DashLine);
  qp->setPen(pen);
  qp->drawLine(20, 80, 250, 80);

  pen.setStyle(Qt::DashDotLine);
  qp->setPen(pen);
  qp->drawLine(20, 120, 250, 120);

  pen.setStyle(Qt::DotLine);
  qp->setPen(pen);
  qp->drawLine(20, 160, 250, 160);

  pen.setStyle(Qt::DashDotDotLine);
  qp->setPen(pen);
  qp->drawLine(20, 200, 250, 200);

  QVector&lt;qreal&gt; dashes;
  qreal space = 4;

  dashes &lt;&lt; 1 &lt;&lt; space &lt;&lt; 5 &lt;&lt; space;

  pen.setStyle(Qt::CustomDashLine);
  pen.setDashPattern(dashes);
  qp->setPen(pen);
  qp->drawLine(20, 240, 250, 240);
}
</pre>

<p>
We paint six different lines on the window. 
</p>

<pre class="explanation">
void Lines::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);
  QPainter qp(this);
  drawLines(&amp;qp);
}
</pre>

<p>
The <code>paintEvent()</code> is called when a widget is updated.
It is where we create the <code>QPainter</code> object and do the drawing.
Since we do not utilize the <code>QPaintEvent</code> object, we suppress the
compiler warning with the <code>Q_UNUSED</code> macro. The real drawing
is delegated to the drawLines() method.
</p>

<pre class="explanation">
QPen pen(Qt::black, 2, Qt::SolidLine);
qp->setPen(pen);
</pre>

<p>
We create a <code>QPen</code> object. The pen is solid, 2px thick and of black colour. 
The pen is used to draw lines and outlines of shapes. The pen is set to the
painter object. 
</p>


<pre class="explanation">
qp->drawLine(20, 40, 250, 40);
</pre>

<p>
Here we paint the first line. The four parameters are coordinates of 
two points on the window. 
</p>

<pre class="explanation">
pen.setStyle(Qt::DashLine);
</pre>

<p>
This code line sets a different pen style. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "lines.h"
#include &lt;QApplication&gt;

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  
    
  Lines window;
  
  window.resize(280, 270);
  window.move(300, 300);
  window.setWindowTitle("Lines");
  window.show();

  return app.exec();
}
</pre>

<p>
Main file. 
</p>

<img src="/img/gui/qt4/lines.png" alt="Lines">
<div class="figure">
Figure: Lines
</div>


<h2>Colours</h2>

<p>
A colour is an object representing a combination of Red, Green, and Blue (RGB) 
intensity values. Valid RGB values are in the range 0 to 255. In the following 
example, we draw 9 rectangles filled with 9 different colours. 
</p>

<div class="codehead">colors.h</div>
<pre class="code">
#pragma once

#include &lt;QWidget&gt;

class Colors : public QWidget
{
  public:
    Colors(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);

};

</pre>

<p>
Header file. 
</p>

<div class="codehead">colors.cpp</div>
<pre class="code">
#include "colors.h"
#include &lt;QPainter&gt;

Colors::Colors(QWidget *parent)
    : QWidget(parent)
{

}

void Colors::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);
  
  QPainter painter(this);
  painter.setPen(QColor("#d4d4d4"));

  painter.setBrush(QBrush("#c56c00"));
  painter.drawRect(10, 15, 90, 60);

  painter.setBrush(QBrush("#1ac500"));
  painter.drawRect(130, 15, 90, 60);

  painter.setBrush(QBrush("#539e47"));
  painter.drawRect(250, 15, 90, 60);

  painter.setBrush(QBrush("#004fc5"));
  painter.drawRect(10, 105, 90, 60);

  painter.setBrush(QBrush("#c50024"));
  painter.drawRect(130, 105, 90, 60);

  painter.setBrush(QBrush("#9e4757"));
  painter.drawRect(250, 105, 90, 60);

  painter.setBrush(QBrush("#5f3b00"));
  painter.drawRect(10, 195, 90, 60);

  painter.setBrush(QBrush("#4c4c4c"));
  painter.drawRect(130, 195, 90, 60);

  painter.setBrush(QBrush("#785f36"));
  painter.drawRect(250, 195, 90, 60);
}
</pre>

<p>
We draw nine rectangles with different color fills. The outline of the 
rectangles is gray. 
</p>

<pre class="explanation">
painter.setBrush(QBrush("#c56c00"));
painter.drawRect(10, 15, 90, 60);
</pre>

<p>
The <code>QBrush</code> class defines the fill pattern of shapes drawn by 
QPainter. The <code>drawRect()</code> method draws the rectangle. It draws a 
rectangle with upper left corner at x, y point and with the given width and 
height. We used a hexadecimal notation to specify a colour value. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "colors.h"
#include &lt;QApplication&gt;

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);

  Colors window;

  window.resize(350, 280);
  window.move(300, 300);
  window.setWindowTitle("Colours");
  window.show();
  
  return app.exec();
}
</pre>


<p>
Main file. 
</p>


<img src="/img/gui/qt4/colours.png" alt="Colors">
<div class="figure">
Figure: Colors
</div>


<h2>Patterns</h2>

<p>
The following programming code example is similar to the previous one. 
This time we fill the rectangles with various predefined patterns. 
</p>

<div class="codehead">brushes.h</div>
<pre class="code">
#pragma once

#include &lt;QWidget&gt;

class Brushes : public QWidget
{
  Q_OBJECT  

  public:
    Brushes(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);

};
</pre>

<p>
Header file. 
</p>

<div class="codehead">brushes.cpp</div>
<pre class="code">
#include "brushes.h"
#include &lt;QApplication&gt;
#include &lt;QPainter&gt;


Brushes::Brushes(QWidget *parent)
    : QWidget(parent)
{

}

void Brushes::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);
    
  QPainter painter(this);
  painter.setPen(Qt::NoPen);

  painter.setBrush(Qt::HorPattern);
  painter.drawRect(10, 15, 90, 60);

  painter.setBrush(Qt::VerPattern);
  painter.drawRect(130, 15, 90, 60);

  painter.setBrush(Qt::CrossPattern);
  painter.drawRect(250, 15, 90, 60);

  painter.setBrush(Qt::Dense7Pattern);
  painter.drawRect(10, 105, 90, 60);

  painter.setBrush(Qt::Dense6Pattern);
  painter.drawRect(130, 105, 90, 60);

  painter.setBrush(Qt::Dense5Pattern);
  painter.drawRect(250, 105, 90, 60);

  painter.setBrush(Qt::BDiagPattern);
  painter.drawRect(10, 195, 90, 60);

  painter.setBrush(Qt::FDiagPattern);
  painter.drawRect(130, 195, 90, 60);

  painter.setBrush(Qt::DiagCrossPattern);
  painter.drawRect(250, 195, 90, 60);

}
</pre>

<p>
We draw 9 rectangles with various brush patterns. 
</p>

<pre class="explanation">
painter.setBrush(Qt::HorPattern);
painter.drawRect(10, 15, 90, 60);
</pre>

<p>
We draw a rectangle with a specific pattern. The 
<code>Qt::HorPattern</code> is a constant used to 
create a pattern of horizontal lines. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "brushes.h"
#include &lt;QApplication&gt;

int main(int argc, char *argv[])
{
  QApplication app(argc, argv); 

  Brushes window;
  
  window.resize(350, 280);
  window.move(300, 300);    
  window.setWindowTitle("Brushes");
  window.show();
  
  return app.exec();
}
</pre>

<p>
Main file. 
</p>


<img src="/img/gui/qt4/patterns.png" alt="Patterns">
<div class="figure">
Figure: Patterns
</div>


<h2>Donut</h2>


<p>
In the following example, we will create a donut shape.
</p>

<div class="codehead">donut.h</div>
<pre class="code">
#pragma once

#include &lt;QWidget&gt;

class Donut : public QWidget
{
  Q_OBJECT   

  public:
    Donut(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);

};
</pre>

<p>
Header file. 
</p>

<div class="codehead">donut.cpp</div>
<pre class="code">
#include "donut.h"
#include &lt;QApplication&gt;
#include &lt;QPainter&gt;


Donut::Donut(QWidget *parent)
    : QWidget(parent)
{

}

void Donut::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);
  
  QPainter painter(this);

  painter.setPen(QPen(QBrush("#535353"), 0.5));
  painter.setRenderHint(QPainter::Antialiasing);

  int h = height();
  int w = width();

  painter.translate(QPoint(w/2, h/2));

  for (qreal rot=0; rot &lt; 360.0; rot+=5.0 ) {
      painter.drawEllipse(-125, -40, 250, 80);
      painter.rotate(5.0);
  }
}
</pre>

<p>
The "Donut" is an advanced geometrical shape resembling this kind of food. 
We create it by drawing 72 rotated ellipses. 
</p>

<pre class="explanation">
painter.setRenderHint(QPainter::Antialiasing);
</pre>

<p>
We will paint in antialiased mode. The rendering will be of higher quality. 
</p>

<pre class="explanation">
int h = height();
int w = width();

painter.translate(QPoint(w/2, h/2));
</pre>

<p>
These lines move the beginning of the coordinate system into the middle 
of the window. By default, it is positioned at 0, 0 point. In another words, 
at the upper left corner of the window. By moving the coordinate system, 
the drawing will be much easier. 
</p>

<pre class="explanation">
for (qreal rot=0; rot &lt; 360.0; rot+=5.0 ) {
    painter.drawEllipse(-125, -40, 250, 80);
    painter.rotate(5.0);
}
</pre>

<p>
In this for cycle, we draw 72 rotated ellipses. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "donut.h"
#include &lt;QApplication&gt;


int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  

  Donut window;

  window.resize(350, 280);
  window.move(300, 300);  
  window.setWindowTitle("Donut");
  window.show();

  return app.exec();
}
</pre>

<p>
Main file. 
</p>


<h2>Shapes</h2>

<p>
The Qt4 painting API can draw various shapes. The following programming code 
example will show some of them.
</p>

<div class="codehead">shapes.h</div>
<pre class="code">
#include &lt;QWidget&gt;

class Shapes : public QWidget
{
  Q_OBJECT  

  public:
    Shapes(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);

};
</pre>

<p>
Header file. 
</p>

<div class="codehead">shapes.cpp</div>
<pre class="code">
#include "shapes.h"
#include &lt;QPainter&gt;
#include &lt;QPainterPath&gt;


Shapes::Shapes(QWidget *parent)
    : QWidget(parent)
{

}

void Shapes::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);
  QPainter painter(this);

  painter.setRenderHint(QPainter::Antialiasing);
  painter.setPen(QPen(QBrush("#888"), 1));
  painter.setBrush(QBrush(QColor("#888")));

  QPainterPath path1;

  path1.moveTo(5, 5);
  path1.cubicTo(40, 5,  50, 50,  99, 99);
  path1.cubicTo(5, 99,  50, 50,  5, 5);
  painter.drawPath(path1);  

  painter.drawPie(130, 20, 90, 60, 30*16, 120*16);
  painter.drawChord(240, 30, 90, 60, 0, 16*180);
  painter.drawRoundRect(20, 120, 80, 50);

  QPolygon polygon;
  polygon &lt;&lt; QPoint(130, 140) &lt;&lt; QPoint(180, 170)
          &lt;&lt; QPoint(180, 140) &lt;&lt; QPoint(220, 110)
          &lt;&lt; QPoint(140, 100);
  painter.drawPolygon(polygon);

  painter.drawRect(250, 110, 60, 60);

  QPointF baseline(20, 250);
  QFont font("Georgia", 55);
  QPainterPath path2;
  path2.addText(baseline, font, "Q");
  painter.drawPath(path2);

  painter.drawEllipse(140, 200, 60, 60);
  painter.drawEllipse(240, 200, 90, 60);
}

</pre>

<p>
We draw nine different shapes.  
</p>

<pre class="explanation">
QPainterPath path1;

path1.moveTo(5, 5);
path1.cubicTo(40, 5,  50, 50,  99, 99);
path1.cubicTo(5, 99,  50, 50,  5, 5);
painter.drawPath(path1);
</pre>

<p>
 The <code>QPainterPath</code> is an object used to create complex 
shapes. We use it to draw bezier curves. 
</p>

<pre class="explanation">
painter.drawPie(130, 20, 90, 60, 30*16, 120*16);
painter.drawChord(240, 30, 90, 60, 0, 16*180);
painter.drawRoundRect(20, 120, 80, 50);
</pre>

<p>
These code lines draw a pie, a chord and a rounded rectangle. 
</p>

<pre class="explanation">
QPolygon polygon;
polygon &lt;&lt; QPoint(130, 140) &lt;&lt; QPoint(180, 170)
        &lt;&lt; QPoint(180, 140) &lt;&lt; QPoint(220, 110)
        &lt;&lt; QPoint(140, 100);
painter.drawPolygon(polygon);
</pre>

<p>
Here we draw a polygon consisting of five points.  
</p>

<pre class="explanation">
QPointF baseline(20, 250);
QFont font("Georgia", 55);
QPainterPath path2;
path2.addText(baseline, font, "Q");
painter.drawPath(path2);
</pre>

<p>
The Qt4 programming library can be used to create a path based on a 
font character. 
</p>

<pre class="explanation">
painter.drawEllipse(140, 200, 60, 60);
painter.drawEllipse(240, 200, 90, 60);
</pre>

<p>
The <code>drawEllipse()</code> method can be used to draw an 
ellipse and a circle as well. 
The circle is a special case of an ellipse. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "shapes.h"
#include &lt;QApplication&gt;

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  

  Shapes window;

  window.resize(350, 280);
  window.move(300, 300);    
  window.setWindowTitle("Shapes");
  window.show();
  
  return app.exec();
}
</pre>

<p>
Main file. 
</p>


<img src="/img/gui/qt4/shapes.png" alt="Shapes">
<div class="figure">
Figure: Shapes
</div>


<h2>Gradients</h2>


<p>
In computer graphics, gradient is a smooth blending of shades from light 
to dark or from one colour to another. In 2D drawing programs and paint 
programs, gradients are used to create colourful backgrounds and special 
effects as well as to simulate lights and shadows. (answers.com)
</p>

<p>
The following code example will show, how to create gradients in 
Qt4 programming library. 
</p>


<div class="codehead">gradients.h</div>
<pre class="code">
#ifndef GRADIENT_H
#define GRADIENT_H

#include &lt;QWidget&gt;

class Gradient : public QWidget
{

  public:
    Gradient(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);

};

#endif
</pre>

<p>
Header file.
</p>

<div class="codehead">gradients.cpp</div>
<pre class="code">
#include "gradients.h"
#include &lt;QApplication&gt;
#include &lt;QPainter&gt;

Gradient::Gradient(QWidget *parent)
    : QWidget(parent)
{

}

void Gradient::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);
  
  QPainter painter(this);

  QLinearGradient grad1(0, 20, 0, 110);

  grad1.setColorAt(0.1, Qt::black);
  grad1.setColorAt(0.5, Qt::yellow);
  grad1.setColorAt(0.9, Qt::black);

  painter.fillRect(20, 20, 300, 90, grad1);

  QLinearGradient grad2(0, 55, 250, 0);

  grad2.setColorAt(0.2, Qt::black);
  grad2.setColorAt(0.5, Qt::red);
  grad2.setColorAt(0.8, Qt::black);

  painter.fillRect(20, 140, 300, 100, grad2);
}
</pre>

<p>
In the code example, we will draw two rectagles and fill them with gradients. 
</p>


<pre class="explanation">
QLinearGradient grad1(0, 20, 0, 110);

grad1.setColorAt(0.1, Qt::black);
grad1.setColorAt(0.5, Qt::yellow);
grad1.setColorAt(0.9, Qt::black);
</pre>

<p>
The colorus in a gradient are defined using stop points. The 
<code>setColorAt()</code> creates a stop point at the 
given position with the given colour.
</p>

<pre class="explanation">
painter.fillRect(20, 20, 300, 90, grad1);
</pre>

<p>
We fill the rectangle with the gradient. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "gradients.h"
#include &lt;QApplication&gt;

int main(int argc, char *argv[])
{
  QApplication app(argc, argv);  

  Gradient window;

  window.resize(350, 260);
  window.move(300, 300);    
  window.setWindowTitle("Gradients");
  window.show();
  
  return app.exec();
}
</pre>

<p>
Main file. 
</p>

<img src="/img/gui/qt4/gradients.png" alt="Gradients">
<div class="figure">
Figure: Gradients
</div>


<h2>Puff</h2>

<p>
In the last example of this C++ Qt4 tutorial chapter, we create a puff effect. 
The example will display a growing centered text, that will gradully fade out
from some point. This is a very common effect, which you can often see in flash 
animations on the web.
</p>

<div class="codehead">puff.h</div>
<pre class="code">
#pragma once

#include &lt;QWidget&gt;

class Puff : public QWidget
{
  Q_OBJECT  

  public:
    Puff(QWidget *parent = 0);

  protected:
    void paintEvent(QPaintEvent *event);
    void timerEvent(QTimerEvent *event);

  private:
    int x;
    qreal opacity;
    int timerId;
};
</pre>

<p>
In the header file, we have two event handlers defined. Paint event handler 
and timer handler. 
</p>

<div class="codehead">puff.cpp</div>
<pre class="code">
#include "puff.h"
#include &lt;QPainter&gt;
#include &lt;QTimer&gt;
#include &lt;QTextStream&gt;


Puff::Puff(QWidget *parent)
    : QWidget(parent)
{
  x = 1;
  opacity = 1.0;
  timerId = startTimer(15);
}

void Puff::paintEvent(QPaintEvent *e)
{
  Q_UNUSED(e);  
  
  QPainter painter(this);
  QTextStream out(stdout);

  QString text = "ZetCode";

  painter.setPen(QPen(QBrush("#575555"), 1));

  QFont font("Courier", x, QFont::DemiBold);
  QFontMetrics fm(font);
  int textWidth = fm.width(text);

  painter.setFont(font);

  if (x > 10) {
    opacity -= 0.01;
    painter.setOpacity(opacity);
  }

  if (opacity <= 0) {
    killTimer(timerId);
    out << "timer stopped\n";
  }

  int h = height();
  int w = width();

  painter.translate(QPoint(w/2, h/2));
  painter.drawText(-textWidth/2, 0, text);
}

void Puff::timerEvent(QTimerEvent *e)
{
  Q_UNUSED(e);
  
  x += 1;
  repaint();
}
</pre>

<p>
This is the puff.cpp file. 
</p>


<pre class="explanation">
Puff::Puff(QWidget *parent)
    : QWidget(parent)
{
  x = 1;
  opacity = 1.0;
  timerId = startTimer(15);
}
</pre>

<p>
At the constructor, we start the timer. Each 15ms a timer event is generated. 
</p>

<pre class="explanation">
void Puff::timerEvent(QTimerEvent *event)
{
  x += 1;
  repaint();
}
</pre>

<p>
Inside the <code>timerEvent()</code> we increase the font size and 
repaint the widget. 
</p>

<pre class="explanation">
 if (x &gt; 10) {
   opacity -= 0.01;
   painter.setOpacity(opacity);
 }
</pre>

<p>
If the font size is greater than 10 points, we gradually decrease the opacity. 
The text fades away. 
</p>

<pre class="explanation">
if (opacity &lt;= 0) {
  killTimer(timerId);
  out &lt;&lt; "timer stopped\n";
}
</pre>

<p>
If the text fades away, we kill the timer. 
</p>

<div class="codehead">main.cpp</div>
<pre class="code">
#include "puff.h"
#include &lt;QApplication&gt;

int main(int argc, char *argv[])
{
  QApplication app(argc, argv); 

  Puff window;

  window.resize(350, 280);
  window.move(300, 300);      
  window.setWindowTitle("Puff");
  window.show();

  return app.exec();
}
</pre>

<p>
Main file. 
</p>


<p>
This chapter was about painting in Qt4.
</p>


<div class="center"> 
<script type="text/javascript"><!--
google_ad_client = "pub-9706709751191532";
/* horizontal */
google_ad_slot = "1734478269";
google_ad_width = 468;
google_ad_height = 60;
//-->
</script> 
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"> 
</script> 
</div>
<br>


<div class="botNav, center">
<span class="botNavItem"><a href="/">Home</a></span> ‡ <span class="botNavItem"><a href="..">Contents</a></span> ‡ 
<span class="botNavItem"><a href="#">Top of Page</a></span>
</div>


<div class="footer">
<div class="signature">
<a href="/">ZetCode</a> last modified October 16, 2012  <span class="copyright">&copy; 2007 - 2013 Jan Bodnar</span>
</div>
</div>

</div> <!-- content -->

</div> <!-- container -->

</body>
</html>
